<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>关灯</title>

        <style>

			body { background: url(images/bg_body.jpg) repeat-x #e5e5e5; padding: 0; margin: 0; }

			h1 { font-family: "Contrail One"; margin-bottom: 5px; font-size: 36px; }

			.container { position: relative; padding: 50px; width: 45%; margin: 0 auto; }

			h1 a, h1 a:link, h1 a:visited { color: #4C4C4C; text-decoration: none; }

			h1 a:hover, h1 a:focus { color: #6B6B6B; text-decoration: none; }

			#top { position: relative; display: block; background: #c72034; height: 10px; margin: 0 0 10px 0; border-bottom: 1px solid #E5E5E5; }

        </style>

		<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

		

		<!-- Allofthelights.js CSS -->

		<link rel="stylesheet" href="./jquery.allofthelights.css">

    </head>

    <body>     

		<div id="top"></div>

		<div class="container">

			<h1>Demo </h2>			

			<!-- Allofthelights.js switch & iframe video -->

			<div id="switch">开关</div>

			<iframe id="video" width="860" height="524" src="https://player.bilibili.com/player.html?aid=498473782&bvid=BV1YK411p7o6&cid=200742634&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

		</div>

    

		<script src="https://www.jq22.com/jquery/1.7.2/jquery.min.js"></script>

		

		<!-- Allofthelights.js JS -->

		<script src="./jquery.allofthelights.min.js"></script>

		<script>

		$(document).ready(function() {

			$("#video").allofthelights();  

		});

		</script>
		<script src="https://www.jq22.com/js/jq.js"></script>	

	</body>



</html>